<template>
  <div>
<h3>demo1</h3>
<ul>
  <li>num:{{ num }}</li>
</ul>

<input type="button" value="修改num的值" v-on:click="fn"class="btn btn-primary">
  </div>
  <div>
    <tbody>
      <tr>
      <td>Id</td>
      <td>名字</td>
      <td>年龄</td>
      <td>操作</td>
    </tr>
    <tr v-for="item in arrobj">
      <td>{{item.id}}</td>
      <td>{{ item.name }}</td>
      <td>{{item.nian}}</td>
      <td>操作</td>
    </tr>
    </tbody>
  </div>
  <select>
    <option>请选择</option>
    <option  v-bind:value="item.id" v-for="item in chengshi"::key="item.id">{{item.name}}</option>
    
  </select>
</template>

<script setup lang="ts">
import{ref,reactive}from 'vue'
let num=ref(100)
let arr=reactive([20,30])

let arrobj=reactive([
{id:1,name:"王五",nian:20,marry:false},
{id:2,name:"李四",nian:20,marry:false},
{id:3,name:"张三",nian:20,marry:false},

])
let  chengshi=reactive([
{id:1,name:"河北"},
{id:1,name:"河南"},

])
  
   
 
   
 

//const 常量
const fn=()=>{
  num.value++;
  
}
</script>

<style scoped>

</style>  